<template>
	<view id="main">
		<!-- 横向滑动列表 -->
		<!-- <view id="Slide_list">
			<view v-for="(item,index) in productList" :key="index">
				<view>{{item.name}}</view>
			</view>
		</view> -->
		<view id="TopSearch">
			<!-- 搜索栏左边消息图标 -->
			<image src="../../static/Image/news.png" mode="" class="NewsIcon icons"></image>
			<!-- 搜索框&图标 -->
			<view id="InputControl" @tap="goMove">
				<!-- 搜索框左边的图标 -->
				<view class="item Input_icon" v-for="(value,index) in iconType" :key="index">
					<icon :type="value" size="26" />
				</view>
				<!-- 搜索框 -->
				<input class="uni_input" @input="onKeyInput" placeholder="智能积木 越野四驱车" />
			</view>
			<!-- 搜索栏右边扫一扫图标 -->
			<image src="../../static/Image/scan.png" mode="" class="ScanIcon icons"></image>
		</view>
		<!-- 下拉提示 -->
		<slider :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap"></slider>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in productList" :key="index" class="swiper_scl">
					<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="width: 100%; height: 1200upx;">
						<view id="Slide_list">
							<view v-for="(item,index) in productList" :key="index">
								<view>{{item.name}}</view>
							</view>
						</view>
						<!-- 轮播图 -->
						<view id="SlideShow">
							<swiper indicator-dots="true" autoplay="true" :interval="3000" :duration="500" circular="true">
								<block v-for="(item,index) in imgUrls" :key="index">
									<swiper-item>
										<image :src="item.src" style="width:100%" />
									</swiper-item>
								</block>
							</swiper>
						</view>
						<!-- 横向推荐栏 -->
						<view id="Recommended">
							<view v-for="(item,index) in Icons" :key="index" class="recom_son">
								<image :src="item.src"></image>
								<view>{{item.text}}</view>
							</view>
						</view>
						<!-- 横向热销栏 -->
						<view id="HotCakes">
							<view class="huaweiMata">
								<image :src="hotCakes[0].src" />
								</image>
							</view>
							<view class="theBed">
								<image :src="hotCakes[1].src" />
								</image>
								<image :src="hotCakes[2].src" />
								</image>
							</view>
						</view>
						<!-- 下拉列表 -->
						<view id="DownList">
							<view v-for="(item,index) in goods" :key="index" class="downlister">
								<image :src="item.cover" class="DownList_pic"></image>
								<view>{{item.title}}</view>
								<view class="Fonts">{{item.desc}}</view>
								<view class="Txt">￥{{item.oprice}} <text>{{item.pprice}}</text></view>
							</view>
						</view>
						<!-- 没有更多 -->
						<view id="NoMore">加载更多</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import slider from "../../components/slider/slider.vue"
	export default {
		data() {
			return {
				// 顶部搜索框的图标
				iconType: ['search'],
				// 接收滑动列表的数组
				productList: [],
				// 接收轮播图的数组
				imgUrls: [],
				// 接收横向推荐栏的数组
				Icons: [],
				//接收横向热销栏的数组
				hotCakes: [],
				//接收下拉列表的数组
				goods: []
			}
		},
		// 滑块组件
		components: {
			slider
		},
		// 点击切换导航
		tabtap(index) {
			let _this = this
			_this.tabIndex = index;
			let id = this.tabIndex + 1
			uni.request({
				url: `http://ceshi3.dishait.cn/api/index_category/${id}/data/1`,
				method: 'GET',
				success(res) {
					// console.log(res)
					if (id == 2) {
						_this.imgUrls = res.data.data[0].data //轮播图
						_this.Icons = res.data.data[1].data //横向推荐栏
						_this.hotCakes = res.data.data[2].data //横向热销栏
						_this.goods = res.data.data[4] //下拉列表
						_this.displays = false
					} else if (id == 1) {
						_this.imgUrls = res.data.data[0].data //轮播图
						_this.Icons = res.data.data[1].data //横向推荐栏
						_this.hotCakes = res.data.data[2].data //横向热销栏
						_this.goods = res.data.data[4] //下拉列表
						_this.displays = true
					} else {
						_this.imgUrls = ''
						_this.Icons = ''
						_this.hotCakes = ''
						_this.goods = ''
						_this.txt = ""
					}
				}
			})
		},
		//滑动切换导航
		tabChange(e) {
			console.log(e)
			let _this = this
			_this.tabIndex = e.detail.current;
			let id = _this.tabIndex + 1
			console.log(id)
			uni.request({
				url: `http://ceshi3.dishait.cn/api/index_category/${id}/data/1`,
				method: 'GET',
				success(res) {
					// console.log(res)
					if (id == 2) {
						_this.imgUrls = res.data.data[0].data //轮播图
						_this.Icons = res.data.data[1].data //横向推荐栏
						_this.hotCakes = res.data.data[2].data //横向热销栏
						_this.goods = res.data.data[4] //下拉列表
						_this.displays = false
					} else if (id == 1) {
						_this.imgUrls = res.data.data[0].data //轮播图
						_this.Icons = res.data.data[1].data //横向推荐栏
						_this.hotCakes = res.data.data[2].data //横向热销栏
						_this.goods = res.data.data[4] //下拉列表
						_this.displays = true
					} else {
						_this.imgUrls = ''
						_this.Icons = ''
						_this.hotCakes = ''
						_this.goods = ''
						_this.txt = ""
					}
				}
			})
		},
		onLoad() {
			// 图标的内容
			this.iconType = ['search']
			// 调用接口
			this.getList();
			this.getLists();
		},
		methods: {
			// 点击跳转
			goMove() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			// 加载提示
			scrolltolower() {
				uni.showToast({
					icon: 'success',
					title: '加载成功',
					duration: 2000
				});
			},
			// 顶部滑动列表接口
			getList() {
				uni.request({
					url: "http://ceshi3.dishait.cn/api/index_category/data",
					method: 'get',
					success: (res) => {
						// console.log(res);
						this.productList = res.data.data.category;
						this.imgUrls = res.data.data.data[0].data;
					},
				});
			},
			// 横向推荐栏
			getLists() {
				uni.request({
					url: "http://ceshi3.dishait.cn/api/index_category/1/data/1",
					method: 'get',
					success: (res) => {
						console.log(res);
						this.Icons = res.data.data[1].data;
						this.hotCakes = res.data.data[2].data;
						this.goods = res.data.data[4].data
					},
				});
			},
		}
	}
</script>

<style>
	/* 顶部搜索栏父级 */
	#TopSearch {
		width: 100%;
		height: 65upx;
		display: flex;
		padding-top: 10upx;
		justify-content: space-around;
	}

	/* 顶部导航栏icon图标 */
	.icons {
		width: 55upx;
		height: 55upx;
	}

	/* 搜索框&图标的父级 */
	#InputControl {
		width: 75%;
		display: flex;
		background-color: #F7F7F7;
	}

	/* 顶部导航栏input框 */
	#TopSearch .uni_input {
		width: 100%;
		height: 65upx;
		line-height: 65upx;
		padding-left: 10upx;
	}

	/* 搜索框左边的图标 */
	.Input_icon {
		padding-left: 10upx;
	}

	/* 横向滑动列表 */
	#Slide_list {
		display: flex;
		justify-content: space-around;
		padding-top: 20upx;
	}

	/* 轮播图父级标签 */
	#SlideShow {
		margin-top: 20upx;
	}

	/* 横向推荐栏父级 */
	#Recommended {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: space-around;
	}

	/* 横向推荐栏的icon图标 */
	#Recommended image {
		width: 80upx;
		height: 80upx;
	}

	/* 横向推荐栏父级标签 */
	.recom_son {
		padding-top: 25rpx;
	}

	/* 横向热销栏父级标签 */
	#HotCakes {
		display: flex;
		margin-top: 20rpx;
	}

	/* 横向热销栏左边华为图片 */
	.huaweiMata image {
		width: 375upx;
	}

	/* 横向热销栏右边床具图片 */
	.theBed image {
		width: 375rpx;
		height: 237rpx;
	}

	/* 下拉列表的父级标签 */
	#DownList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 下拉列表的图片 */
	.DownList_pic {
		width: 375upx;
	}

	/* 渲染列表的父级标签 */
	.downlister {
		width: 370upx;
	}

	/* 内容介绍的字体颜色 */
	.Fonts {
		font-size: 24upx;
		color: #c0c0c0;
	}

	/* 高价格 */
	.Txt {
		color: #f40;
		;
	}

	/* 低价格 */
	.Txt text {
		color: #c0c0c0;
		padding-left: 10upx;
		font-size: 28rpx;
	}

	/* 没有更多 */
	#NoMore {
		width: 100%;
		height: 130rpx;
		text-align: center;
		line-height: 130rpx;
		background-color: whitesmoke;
	}

	.swiper_scl {
		overflow-y: scroll;
	}

	.swiper-box {
		height: 100vh;
	}

	#main {
		width: 100%;
		height: auto;
	}
</style>
